<template>
  <div class="container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="目录名称">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="formInline.region"
          placeholder="请选择"
          @change="changeState"
        >
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onClear"
          :style="{ background: '#fff', color: 'black' }"
          >清除</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
      <el-button
        type="primary"
        icon="el-icon-edit"
        :style="{ background: '#67C23A' }"
        class="addmulu"
        @click="dialogVisible = true"
        >新增目录</el-button
      >
      <el-dialog title="新增目录" :visible.sync="dialogVisible" width="40%">
        <span class="suoshu">所属学科</span>
        <template>
          <el-select v-model.number="value" placeholder="请选择">
            <el-option
              v-for="(item, index) in tableData"
              :key="index"
              :value="item.subjectID"
            >
            </el-option>
          </el-select>
        </template>
        <br />
        <br />
        <span class="mlname">目录名称</span>
        <template>
          <el-input
            v-model.trim="input"
            placeholder="请输入内容"
            class="mlInput"
          ></el-input>
        </template>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addlist">确 定</el-button>
        </span>
      </el-dialog>
    </el-form>
    <el-alert
      :title="`数据一共${totalCount}条`"
      type="info"
      show-icon
      :style="{ background: '#f4f4f5' }"
    >
    </el-alert>
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="120"> </el-table-column>
      <el-table-column property="subjectName" label="所属学科" width="120">
      </el-table-column>
      <el-table-column property="directoryName" label="目录名称">
      </el-table-column>
      <el-table-column property="username" label="创建者"> </el-table-column>
      <el-table-column label="创建日期">
        <template slot-scope="scope">
          <p>{{ tableData[scope.$index].addDate | relativeTime }}</p>
        </template>
      </el-table-column>
      <el-table-column property="totals" label="面试题数量"> </el-table-column>
      <el-table-column label="状态" property="state">
        <template slot-scope="scope">
          {{ scope.row.state === 1 ? "启用" : "禁用" }}
        </template>
      </el-table-column>
      <el-table-column property="address" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            {{ scope.row.state === 1 ? "禁用" : "启用" }}</el-button
          >

          <el-button
            type="text"
            size="small"
            @click.stop="dialogChangeBtn(scope)"
            :disabled="scope.row.state === 1"
            >修改</el-button
          >

          <el-button
            type="text"
            size="small"
            @click="delBtn(scope.row)"
            :disabled="scope.row.state === 1"
            >删除</el-button
          >
          <!-- @click.stop="dialogdelShow = true" -->
          <!-- <el-dialog title="提示" :visible.sync="dialogdelShow" width="40%">
            <p>此操作将永久删除该目录,是否继续?</p>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogdelShow = false">取 消</el-button>
              <el-button
                type="primary"
                @click.stop="delBtn(scope.$index, scope.row)"
                >确 定</el-button
              >
            </span>
          </el-dialog> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 下边是修改的弹框 -->
    <el-dialog
      v-if="dialogChange"
      title="修改目录"
      :visible.sync="dialogChange"
      width="40%"
    >
      <span class="suoshu">所属学科</span>
      <template>
        <el-select v-model.number="value" placeholder="请选择">
          <el-option
            v-for="(item, index) in tableData"
            :key="index"
            :value="item.subjectID"
          >
          </el-option>
        </el-select>
      </template>
      <br />
      <br />
      <span class="mlname">目录名称</span>
      <template>
        <el-input
          v-model.trim="input"
          placeholder="请输入内容"
          class="mlInput"
        ></el-input>
      </template>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogChange = false">取 消</el-button>
        <el-button type="primary" @click.stop="changeBtn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-size="pagesize"
        :total="totalCount"
        layout=" prev,pager, next,sizes,total, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  list,
  add,
  remove,
  update,
  changeState
} from '@/api/hmmm/directorys.js'
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      isState: 0,
      currentPage4: 1,
      tableData: [],
      currentRow: null,
      totalCount: 0,
      pagesize: 0,
      page: 0,
      dialogVisible: false, // 控制新增目录弹出显示隐藏
      dialogdelShow: false, // 控制删除目录弹出显示隐藏
      dialogChange: false, // 控制修改目录弹出显示隐藏
      subjectList: [],
      value: '',
      input: '',
      changeId: ''
    }
  },
  created () {
    this.getMuL()
    this.getList()
  },
  methods: {
    async getList () {
      try {
        const { data } = await list({})
        this.tableData = data.items
      } catch (err) {
        this.$message.error('请求失败')
      }
    },
    async getMuL () {
      try {
        const { data } = await list()
        console.log(data)

        this.totalCount = data.counts
        this.tableData = data.items

        // this.currentPage4 = data.page;
        // this.PageSize = data.pagesize;
      } catch (err) {}
    },
    changeState (e) {
      console.log(e)
      this.isState = e
    },
    async onSubmit () {
      try {
        const { data } = await list({
          directoryName: this.formInline.user,
          state: this.isState
        })
        this.tableData = data.items
      } catch (err) {
        console.log('获取列表失败')
        this.$message.error('请求失败')
      }
    },

    async onClear () {
      // console.log("clear");
      this.formInline.user = ''
      this.formInline.region = ''
      this.getList()
    },
    setCurrent (row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    async handleCurrentChange (val) {
      if (this.totalCount / 10 === 1) {
        return this.page === 1
      }
      // console.log(`当前是第${val}页`);
      this.page = val
      try {
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize
        })
        console.log(data)
        this.tableData = data.items
      } catch (err) {
        this.$message.error('请求失败')
      }
    },
    async handleSizeChange (val) {
      this.pagesize = val
      try {
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize
        })
        this.tableData = data.items
      } catch (err) {
        this.$message.error('请求失败')
      }
    },
    // 新增
    async addlist () {
      if (!this.input) {
        return this.$message.success('请输入内容')
      }
      console.log(this.value)
      console.log(this.input)
      this.dialogVisible = false
      const data = await add({
        subjectID: this.value,
        directoryName: this.input
      })
      console.log(data)
      this.totalCount++
      this.getList()
      // try {
      //   const { data } = await list({});
      //   console.log(data);
      //   this.tableData = data.items;
      // } catch (err) {}
    },
    // 删除
    // async delBtn(id) {
    //   this.dialogdelShow = false;
    //   await remove({});
    //   const i = this.tableData.findIndex((item) => (item.id = id));
    //   this.tableData.splice(i, 1);
    // },

    async delBtn (row) {
      const configRuselt = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (configRuselt !== 'confirm') {
        return this.$message('您取消了删除操作!')
      }
      try {
        const { data } = await remove(row)
        console.log(data)
        this.$message.success('删除成功!')
        this.totalCount--
        this.getList()
      } catch (e) {
        this.$message.error('删除失败!')
      }
    },

    // 修改
    dialogChangeBtn (scope) {
      // 数据回显
      this.value = scope.row.subjectID
      this.input = scope.row.directoryName
      this.dialogChange = true
      this.changeId = scope.row.id
    },
    async changeBtn () {
      this.dialogChange = false
      // const i = this.tableData.findIndex((item) => (item.id = id));
      // this.input = this.tableData[i].directoryName;
      const data = await update({
        id: this.changeId,
        subjectID: this.value,
        directoryName: this.input
      })
      console.log(data)
      this.getList()
      // try {
      //   const { data } = await list({});
      //   console.log(data);
      //   this.tableData = data.items;
      // } catch (err) {}
    },
    // 控制状态和操作里的启用禁用
    async handleClick (row) {
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        row.state = row.state === 1 ? 0 : 1
      } catch (err) {
        console.log('请求失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  background-color: #fff;
  padding: 10px;
}
.demo-form-inline {
  padding: 15px 15px 0 15px;
}
.addmulu {
  float: right;
}
.block {
  padding: 15px;
  float: right;
}
.suoshu {
  margin-right: 15px;
  color: black;
  font-weight: 700;
  font-size: 17px;
}
.mlname {
  margin-right: 15px;
  color: black;
  font-weight: 700;
  font-size: 17px;
}
.dialog-footer {
  margin-right: -200px;
}
.mlInput {
  width: 225px;
  height: 70px;
}
</style>
